<template>
  <div>
    <el-card class="mb-5">
      <div class="flex items-center">
        <div class="text-xl font-bold">
          查询
        </div>

        <el-input
          v-model="form.data.ename"
          placeholder="企业名"
          :maxlength="32"
          prefix-icon="el-icon-office-building"
          style="width:150px;margin-left:100px;"
        />
        <el-input
          v-model="form.data.serNum"
          placeholder="证书编号"
          :maxlength="32"
          clearable
          prefix-icon="el-icon-document"
          style="width:220px;margin-left:30px;"
        />
        <el-select
          v-model="form.data.licType"
          placeholder="证书类型"
          clearable
          style="width:150px;margin-left:30px;"
        >
          <el-option
            v-for="(item, index) in this.$store.state.lic_type"
            :key="index"
            :label="item"
            :value="index"
          />
        </el-select>
        <el-select
          v-model="form.data.state"
          placeholder="证书状态"
          clearable
          style="width:150px;margin-left:30px;"
        >
          <el-option
            label="未审核"
            value="0"
          />
          <el-option
            label="已通过"
            value="1"
          />
          <el-option
            label="未通过"
            value="2"
          />
        </el-select>
        <div class="ml-auto">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="submit"
          >
            查询
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card class="text-center">
      <el-table
        :data="table.data"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="ename"
          label="企业名"
        />
        <el-table-column
          prop="etype"
          label="企业类型"
        />
        <el-table-column
          prop="serNum"
          label="证书编号"
        />
        <el-table-column
          prop="licType"
          label="证书类型"
        />
        <el-table-column
          prop="licState"
          label="认证状态"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.licState===0"
              size="medium"
            >
              未审核
            </el-tag>
            <el-tag
              v-else-if="scope.row.licState===1"
              size="medium"
              type="success"
            >
              已通过
            </el-tag>
            <el-tag
              v-else-if="scope.row.licState===2"
              type="danger"
              size="medium"
            >
              未通过
            </el-tag>
            <el-tag
              v-else
              size="medium"
              type="info"
            >
              {{ scope.row.state }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="300"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              size="small"
              icon="el-icon-check"
              :disabled="scope.row.licState===1"
              @click="setState(scope.row.lid,1)"
            >
              通过
            </el-button>

            <el-button
              type="warning"
              size="small"
              icon="el-icon-close"
              :disabled="scope.row.licState===2"
              @click="setState(scope.row.lid,2)"
            >
              驳回
            </el-button>

            <el-button
              type="danger"
              size="small"
              plain
              icon="el-icon-delete"
              @click="del(scope.row.lid)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        data: {
          ename: undefined,
          serNum: undefined,
          licType: undefined,
          state: undefined
        }
      },
      table: { data: [] }
    }
  },
  methods: {
    submit () {
      this.axios.get('/api/admin/licList', {
        headers: {
          token: this.$store.state.admin.token
        },
        params: {
          ename: this.form.data.ename || undefined,
          sernum: this.form.data.serNum || undefined,
          lictype: this.form.data.licType || undefined,
          licstate: this.form.data.state || undefined
        }
      }).then(function (r) {
        if (r.data.success) {
          this.table.data = r.data.detail
        } else {
          this.$alert(r.data.msg)
        }
      }.bind(this))
    },
    setState (lid, state) {
      this.axios.post('/api/admin/setLicState', null, {
        headers: {
          token: this.$store.state.admin.token
        },
        params: {
          lid,
          state
        }
      }).then(function (r) {
        this.$alert(r.data.msg)
        this.submit()
      }.bind(this))
    },
    del (lid) {
      this.$confirm('此操作将永久删除该备案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post('/api/admin/licdelete', null, {
          headers: {
            token: this.$store.state.admin.token
          },
          params: {
            lid
          }
        }).then(function (r) {
          this.$alert(r.data.msg)
          this.submit()
        }.bind(this))
      })
    }
  }
}
</script>
